<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<script src="../dist/iife/spine-player.js"></script>
	<link rel="stylesheet" href="../css/spine-player.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="../../index.css" />
</head>

<body class="flex flex-col" style="gap: 1em;">
	<div id="container" style="width:640px; height:380px"></div>
	<button id="dispose" style="align-self: flex-start;">Dispose</button>
</body>
<script>
	var player = createPlayer();

	document.getElementById("dispose").addEventListener("click", event => {
		console.log("Disposing player.");
		player.dispose();
		player = createPlayer();
	});

	function createPlayer() {
		return new spine.SpinePlayer("container", {
			skeleton: "/assets/spineboy-pro.skel",
			atlas: "/assets/spineboy-pma.atlas",
			animation: "run",
			premultipliedAlpha: true,
			backgroundColor: "#cccccc",
			viewport: {
				debugRender: true,
			},
			showControls: true
		});
	}
</script>
</body>

</html>